<template>

       <div class="layout">
        <Layout>
            <Layout :style="{padding: '20px 20px'}">

                <Content :style="{padding: '24px 0', minHeight: '280px', background: '#fff'}">
                    <Button @click="changeNode" style="margin-left:225px" type="primary">添加</Button>
                    <Button  @click="removeRoot" style="margin-left:5px" type="error">删除根目录</Button>
                    <Layout>
                        <Sider hide-trigger :style="{background: '#fff'}">
                            <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                                <Tree style="margin-left:20px;margin-top:20px" ref="tree" :data="data"  @on-select-change="onSelectChange"></Tree>
                             </Menu>
                        </Sider>
                        <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                           <Table  border :columns="columns7" :data="tableData"></Table>
                        </Content>
                    </Layout>
                </Content>
            </Layout>
        </Layout>


        <Modal
        v-model="modal1"
        title="填写新增结点信息"
        @on-ok="ok"
        @on-cancel="cancel">
        <p style="margin-bottom:10px;padding-left:20px">父亲节点：<Input v-model="parentId" placeholder="请填写父亲节点..." style="width: 80%"></Input></p>
        <p style="margin-bottom:10px;padding-left:20px">类　　型：<Input v-model="type" placeholder="请填写类型..." style="width: 80%"></Input></p>
        <p style="margin-bottom:10px;padding-left:20px">标　　题：<Input v-model="title" placeholder="请填写标题..." style="width: 80%"></Input></p>
    </Modal>
      <Modal
        v-model="modal2"
        title="修改结点名称"
        @on-ok="cok"
        @on-cancel="cancel">
        <p style="margin-bottom:10px;padding-left:20px">标　　题：<Input v-model="ctitle" placeholder="请填写标题..." style="width: 80%"></Input></p>
    </Modal>
    </div>
    </div>
</template>

<script>
import Tree from '../../base/tree'
export default {
        mixins:[Tree],
        data () {
            return {
                modal1:false,
                modal2:false,
                // data: [],
                parentId:'',
                type:null,
                title:null,
                cid:null,
                ctype:null,
                ctitle:null,
                buttonProps: {
                    type: 'ghost',
                    size: 'small',
                },

                tableData: []

            }
        },
        methods: {
             getTreedata() {
                this.axios({
                    url:`http://localhost:3000/cate/tree`,
                    method:'get'
                }).then(res=>{
                  
                    
                    
                    this.data=res.data;
                    
                   
                })
            },
            remove (index) {
                this.data6.splice(index, 1);
            },
            changeNode(){
                this.modal1=true
            },
            removeRoot(){
                
                 this.$Modal.confirm({
                    title: '确认删除数据吗?',
                    content: '请确认是否删除该记录！',
                    onOk: () => {
                        console.log(params);
                        this.axios({
                                url: `http://localhost:3000/cate/data/${this.cid}`,
                                method: 'delete'
                            }).then(res=>{
                                this.getTreedata();
                        })
                    }
                });
            },
            ok () {

                if(this.parentId==''){
                     this.axios({
                    url:'http://localhost:3000/cate/data',
                    method:'post',
                    data:{
                        // parentId:this.parentId,
                        type:this.type,
                        title:this.title
                    }
                }).then(res=>{
                    this.getTreedata()
                    this.title=null
                })
                }else{
                      this.axios({
                    url:'http://localhost:3000/cate/data',
                    method:'post',
                    data:{
                        parentId:this.parentId,
                        type:this.type,
                        title:this.title
                    }
                }).then(res=>{
                    this.getTreedata()
                    this.title=null
                })
                }
                this.$Message.info('操作成功');
            },
            cancel () {
                this.$Message.info('操作失败');
            },
            cok () {
                console.log(this.cid)
                this.axios({
                    url:`http://localhost:3000/cate/data/${this.cid}`,
                    method:'put',
                    data:{
                        title:this.ctitle
                    }
                }).then(res=>{
                    this.getTreedata()
                })
                this.$Message.info('操作成功');
            }


        },
        mounted(){
                this.getTreedata();
            }
    }
</script>

<style scoped>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
.layout-footer-center{
    text-align: center;
}
</style>
